<template>
  <div class="split-panel-container">
    <div class="layout-container">
      <!--    左侧面板内容-->
      <div :style="{ width: `${leftWidth}%` }" class="panel-left">
        <div class="panel-content">
          <div :class="{ 'collapsed': isTabContentCollapsed }" class="tab-container">
            <!-- 左侧竖向按钮区域 -->
            <div class="vertical-tab-buttons">
              <!-- 独立的折叠图标按钮 -->
              <div class="collapse-toggle-button" @click="toggleContentVisibility">
                <img v-if="isTabContentCollapsed" alt="折叠" class="toolbar-icon" src="/src/asserts/fold1.svg"
                     style="width: 14px; height: 14px; object-fit: contain;">
                <img v-else alt="展开" class="toolbar-icon" src="/src/asserts/fold2.svg"
                     style="width: 14px; height: 14px; object-fit: contain;">
              </div>

              <!-- 原有的Tab按钮 -->
              <div
                  v-for="tab in btnTabs"
                  :key="tab.id"
                  :class="{ active: activeTab === tab.id }"
                  class="vertical-tab-button"
                  @click="switchTab(tab.id)"
              >
                {{ tab.name }}
              </div>
            </div>

            <!-- 右侧Tab内容区域 -->
            <div v-if="!isTabContentCollapsed" class="tab-content-wrapper">
              <div v-if="activeTab === 'connect-tab'" class="tab-content">
                <div class="tab2-default">
                  <!-- 新增图标按钮工具栏 -->
                  <div class="connection-toolbar">
                    <div class="toolbar-button add-connection" title="添加连接" @click="handleAdd">
                      <img alt="添加连接" class="toolbar-icon" src="/src/asserts/newFile.svg">
                    </div>
                    <div class="toolbar-button new-group" title="新建分组" @click="handleNewGroup">
                      <img alt="新建分组" class="toolbar-icon" src="/src/asserts/newFolder.svg">
                    </div>
                    <div class="toolbar-button refresh" title="刷新列表" @click="forceUpdateServerList">
                      <img alt="刷新列表" class="toolbar-icon" src="/src/asserts/refresh.svg">
                    </div>
                  </div>
                  <ul>
                    <li
                        v-for="item in connectServerListData"
                        :class="{ 'selected': selectedWaitingConnectServerId === item.id }"
                        class="fixed-layout-item"
                        @click="selectServer(item)"
                        @contextmenu="showContextMenu($event, item)"
                        @dblclick="doubleClickConnect(item)"
                    >
                      {{ item.serverIp }}
                    </li>
                  </ul>
                </div>
              </div>

              <div v-if="activeTab === 'sftp-tab'" class="tab-content">
                <SFTPTab v-if="activeConnectingServer" :key="activeConnectingServer.id"
                         :form-data="activeConnectingServer"/>
                <div v-else>
                  <h1>请先连接服务器</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--    分割栏-->
      <div class="resize-handle" @mousedown="startResize">
        <div class="handle-icon"></div>
      </div>
      <!--    拖动预览线-->
      <div v-if="isResizing" :style="{ left: `${tempLeftWidth}%` }" class="resize-preview-line">
      </div>
      <!--    右侧终端信息-->
      <div :style="{ width: `${rightWidth}%` }" class="panel-right right-content">
        <el-tabs
            v-if="editableTabs.length > 0"
            v-model="activeConnectingTabId"
            class="full-height-tabs"
            closable
            type="card"
            @tab-remove="removeTab"
        >
          <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.data.serverIp"
              :name="item.name"
          >
            <ConnectToServer :form-data="item.data"/>
          </el-tab-pane>
        </el-tabs>
        <div v-else class="no-history">
          <div class="no-history-icon">
            <svg fill="none" height="80" viewBox="0 0 24 24" width="80" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                  stroke="#e2e8f0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
              <path d="M12 16V12M12 8H12.01" stroke="#cbd5e1" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="1.5"/>
              <path d="M5 12H5.01" stroke="#cbd5e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
              <path d="M19 12H19.01" stroke="#cbd5e1" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="1.5"/>
              <path d="M12 5L12.5 5.5M12 5L11.5 5.5" stroke="#cbd5e1" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="1.5"/>
              <path d="M12 19L12.5 18.5M12 19L11.5 18.5" stroke="#cbd5e1" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="1.5"/>
              <path d="M5 5L5.70711 5.70711M5 5L4.29289 5.70711" stroke="#cbd5e1" stroke-linecap="round"
                    stroke-linejoin="round" stroke-width="1.5"/>
              <path d="M19 19L19.7071 18.2929M19 19L18.2929 18.2929" stroke="#cbd5e1" stroke-linecap="round"
                    stroke-linejoin="round" stroke-width="1.5"/>
              <path d="M19 5L19.7071 5.70711M19 5L18.2929 5.70711" stroke="#cbd5e1" stroke-linecap="round"
                    stroke-linejoin="round" stroke-width="1.5"/>
              <path d="M5 19L5.70711 18.2929M5 19L4.29289 18.2929" stroke="#cbd5e1" stroke-linecap="round"
                    stroke-linejoin="round" stroke-width="1.5"/>
            </svg>
          </div>
          <h3 class="no-history-title">暂无连接</h3>
          <p class="no-history-description">您还没有建立任何SSH连接，请从左侧面板添加或选择一个服务器进行连接。</p>
          <button class="no-history-button" @click="handleAdd">
            <img alt="添加连接" class="toolbar-icon" src="/src/asserts/newFile.svg">
            <span>添加新连接</span>
          </button>
        </div>
      </div>
    </div>
    <!-- 添加折叠状态下的浮标 -->
    <AddServerConnectDialog ref="addServerConnectRef" :dialog-visible="addServerDialogVisible"
                            @close="handleCloseAddServerInfoDialog"
                            @update:dialogVisible="addServerDialogVisible = $event"/>

    <EditServerConnectDialog ref="EditServerConnectRef"
                             :dialog-visible="editDialogVisible" :form-data="EditFormData"
                             @close="handleCloseEditServerInfoDialog"
                             @update:dialogVisible="editDialogVisible = $event"/>

    <!-- 右键菜单 -->
    <div
        v-if="contextMenuVisible"
        :style="{ left: contextMenuPosition.x + 'px', top: contextMenuPosition.y + 'px' }"
        class="context-menu"
        @click.stop
    >
      <div class="menu-item connect" @click="handleConnectOneServer">连接</div>
      <div class="menu-item rename" @click="handleRenameServerInfoItem">重命名</div>
      <div class="menu-item edit" @click="handleEditServerInfoItem">编辑</div>
      <div class="menu-item delete" @click="handleDeleteServerInfoItem">删除</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, onMounted, onUnmounted, watch} from 'vue'
import ConnectToServer from "@/views/webShell/mainPanel/components/ConnectToServer.vue";
import EditServerConnectDialog from "@/views/webShell/Dialog/EditServerConnectDialog.vue";
import AddServerConnectDialog from "@/views/webShell/Dialog/AddServerConnectDialog.vue";
import {deleteServerById, getServerList} from "@/api/webShell/ServerList";
import {message} from "@/utils/ElmessasgeUtils";
import SFTPTab from "@/views/webShell/mainPanel/components/SFTPTab.vue";
import type {ConnectServerInfo, tabData} from "@/type/webShell/connectServerInfo";


const addServerConnectRef = ref(null)
const EditServerConnectRef = ref(null)

const editDialogVisible = ref(false)
const addServerDialogVisible = ref(false)

const defaultLeftWidth = 13
const minLeftWidth = 10      //左侧最小宽度
const minRightWidth = 50     //右侧最小宽度
const collapsedLeftWidth = 2  //左侧折叠时宽度

const leftWidth = ref(defaultLeftWidth)
const rightWidth = ref(100 - defaultLeftWidth)
const tempLeftWidth = ref(defaultLeftWidth) // 临时宽度，用于拖动预览

const isResizing = ref(false)

// 添加Tab内容区域折叠状态
const isTabContentCollapsed = ref(false)

// 打开新增连接信息对话框
function handleAdd() {
  addServerDialogVisible.value = true
}

const EditFormData = ref()
const connectServerListData = ref<ConnectServerInfo[]>([])

// 新建分组功能
function handleNewGroup() {
  // 这里可以实现新建分组的逻辑
  message('新建分组功能待实现', 'info')
}

function forceUpdateServerList() {
  updateServerList()
  message('刷新列表成功', 'success')
}

// 从服务器获取服务器连接信息
function updateServerList() {
  getServerList().then((response: any) => {
    connectServerListData.value = response.data.data
    console.log("connectServerListData", connectServerListData.value)
  })
      .catch(function (error: any) {
        message('获取服务器列表失败', 'error')

      });
}

// 加载服务器列表
onMounted(() => {
  updateServerList()
});

// 添加服务器连接信息提交后 回调函数
function handleCloseAddServerInfoDialog() {
  updateServerList();
}

// 编辑服务器连接信息提交后 回调函数
function handleCloseEditServerInfoDialog() {
  updateServerList();
}


// 左侧面板中的 Tab
const activeTab = ref('connect-tab')
const btnTabs = ref([
  {id: 'connect-tab', name: '连接信息'},
  {id: 'sftp-tab', name: '文件列表'}
])

// 左侧面板 切换Tab，增加折叠功能
const switchTab = (tabId: string) => {
  // 如果点击的是当前激活的Tab，则切换折叠状态
  if (activeTab.value === tabId) {
    isTabContentCollapsed.value = !isTabContentCollapsed.value
    // 根据折叠状态调整左侧面板宽度
    leftWidth.value = isTabContentCollapsed.value ? collapsedLeftWidth : defaultLeftWidth
    rightWidth.value = 100 - leftWidth.value
  } else {
    // 否则切换到对应Tab并展开内容区域
    activeTab.value = tabId
    if (isTabContentCollapsed.value) {
      isTabContentCollapsed.value = false
      leftWidth.value = defaultLeftWidth
      rightWidth.value = 100 - leftWidth.value
    }
  }
}

// 独立的折叠按钮功能
const toggleContentVisibility = () => {
  isTabContentCollapsed.value = !isTabContentCollapsed.value
  // 根据折叠状态调整左侧面板宽度
  leftWidth.value = isTabContentCollapsed.value ? collapsedLeftWidth : defaultLeftWidth
  rightWidth.value = 100 - leftWidth.value
}

// 开始拖动分割线
const startResize = (e: MouseEvent) => {
  if (isTabContentCollapsed.value) {
    // 如果内容区域已折叠，点击时展开内容区域
    isTabContentCollapsed.value = false
    leftWidth.value = defaultLeftWidth
    rightWidth.value = 100 - defaultLeftWidth
    return
  }
  isResizing.value = true
  document.body.style.cursor = 'col-resize'
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  e.preventDefault() // 阻止默认行为，防止选中内容
}

// 处理左右面板尺寸
const handleResize = (e: MouseEvent) => {
  if (!isResizing.value || isTabContentCollapsed.value) return
  const container = document.querySelector('.split-panel-container') as HTMLElement
  const containerRect = container.getBoundingClientRect()
  const containerWidth = containerRect.width
  // 计算鼠标在容器中的相对位置百分比
  let mouseX = e.clientX - containerRect.left
  let newLeftWidth = (mouseX / containerWidth) * 100
  // 应用最小宽度限制
  if (newLeftWidth < minLeftWidth) newLeftWidth = minLeftWidth
  if (newLeftWidth > 100 - minRightWidth) newLeftWidth = 100 - minRightWidth
  // 只更新临时宽度，用于预览线显示
  tempLeftWidth.value = newLeftWidth
}

// 停止拖动分割线
const stopResize = () => {
  isResizing.value = false
  document.body.style.cursor = ''
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  // 放手时，将临时宽度应用到实际宽度
  leftWidth.value = tempLeftWidth.value
  rightWidth.value = 100 - leftWidth.value
}

// 初始化左右布局
onMounted(() => {
  // 初始化宽度
  leftWidth.value = defaultLeftWidth
  rightWidth.value = 100 - defaultLeftWidth
})

onUnmounted(() => {
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})


//============== SSH 面板部分 ===========================

const activeConnectingTabId = ref('0')
const editableTabs = ref<tabData[]>([])
let tabIndex = 0

// 新增一个Tab标签，连接到指定服务器
function handleConnectToSSHServer(connectServerInfo: ConnectServerInfo) {
  let newTabIndex = `${++tabIndex}`
  let tabData = {
    name: newTabIndex,
    data: connectServerInfo
  }
  editableTabs.value.push(tabData)

  activeConnectingTabId.value = newTabIndex
}

// 删除一个Tab标签，删除终端连接
function removeTab(targetIndex: string) {
  const tabs = editableTabs.value

  // 当前激活的tab 对应的index
  let activeIndex = activeConnectingTabId.value

  if (activeIndex === targetIndex) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetIndex) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeIndex = nextTab.name
        } else {
          activeConnectingServer.value = null
        }
      }
    })
  }

  activeConnectingTabId.value = activeIndex
  editableTabs.value = tabs.filter((tab) => tab.name !== targetIndex)
}

const activeConnectingServer = ref<ConnectServerInfo | null>(null)
// 监听当前激活的Tab连接
watch(activeConnectingTabId, (newValue) => {
  let num: any = newValue.valueOf();
  let filter: any = editableTabs.value.filter((tab) => tab.name == num);
  console.log("当前激活标签信息", filter)

  activeConnectingServer.value = filter[0].data;

})

// ============= SSH 连接列表部分 ==================================================

// 右键菜单状态
const contextMenuVisible = ref(false);
const contextMenuPosition = ref({x: 0, y: 0});
const selectedWaitingConnectServer = ref<any>(null); // 选中的待连接服务器
const selectedWaitingConnectServerId = ref<number | null>(null);   // 选中的待连接服务器Id

// 显示右键菜单
const showContextMenu = (event: MouseEvent, server: any) => {
  event.preventDefault();
  selectedWaitingConnectServer.value = server;
  selectedWaitingConnectServerId.value = server.id;
  contextMenuPosition.value = {x: event.clientX, y: event.clientY};
  contextMenuVisible.value = true;
};

// 点击选中服务器
const selectServer = (server: any) => {
  selectedWaitingConnectServer.value = server;
  selectedWaitingConnectServerId.value = server.id;
};

// 双击连接服务器
const doubleClickConnect = (server: any) => {
  selectedWaitingConnectServer.value = server;
  handleConnectOneServer();
};

// 隐藏右键菜单
const hideContextMenu = () => {
  contextMenuVisible.value = false;
  selectedWaitingConnectServer.value = null;
};

// 菜单项点击连接事件
const handleConnectOneServer = () => {
  handleConnectToSSHServer(selectedWaitingConnectServer.value)

  hideContextMenu();
};

// 重命名某个连接
const handleRenameServerInfoItem = () => {
  console.log('重命名服务器:', selectedWaitingConnectServer.value.serverIp);
  hideContextMenu();
};

// 编辑某个连接信息
const handleEditServerInfoItem = () => {
  EditFormData.value = selectedWaitingConnectServer.value
  editDialogVisible.value = true

  hideContextMenu();
};

// 删除某个连接信息
const handleDeleteServerInfoItem = () => {

  deleteServerById(selectedWaitingConnectServer.value.id).then(() => {
    message('删除服务器列表成功')
    updateServerList();
  }).catch(function (error: any) {
    console.log(error);
    message('删除服务器列表失败', 'error');

  });

  hideContextMenu();
};

// 点击其他区域隐藏右键菜单
onMounted(() => {
  document.addEventListener('click', hideContextMenu);
});

onUnmounted(() => {
  document.removeEventListener('click', hideContextMenu);
});

</script>


<style lang="scss" scoped>
.split-panel-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;

  .layout-container {
    display: flex;
    height: 100%;
    position: relative;
  }

  .panel-left, .panel-right {
    position: relative;
    overflow: hidden; /* 修改为hidden，避免整个面板滚动 */
    transition: width 0.3s ease, background-color 0.3s ease;
    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(150, 150, 150, 0.5);
      border-radius: 4px;
      transition: background 0.2s;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: rgba(100, 100, 100, 0.7);
    }
  }

  .panel-left {
    /* 关键调整：将左侧面板的右侧padding设置为负数，使内容可以扩展到滚动条区域 */
    padding-right: -8px;
    margin-right: 1px; /* 补偿padding，保持整体宽度不变 */
    /* 让左侧面板的滚动条与分割线重叠 */
    &::-webkit-scrollbar {
      position: absolute;
      right: 0;
      width: 8px; /* 滚动条宽度 */
    }
  }

  .resize-handle {
    position: relative;
    width: 2px;
    background-color: #f0f0f0;
    cursor: col-resize;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    z-index: 20; /* 确保分割线在最上层 */
    /* 鼠标悬停和拖动时的样式 */
    &:hover, &:active {
      background-color: #e0e0e0;
    }

    .handle-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 30px;
      background-color: #ccc;

      &::before, &::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 30px;
        background-color: #ccc;
      }

      &::before {
        left: -2px;
      }

      &::after {
        left: 2px;
      }
    }
  }

  // 拖动预览线样式
  .resize-preview-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #409eff;
    z-index: 100; /* 确保预览线在最上层 */
    cursor: col-resize;
    box-shadow: 0 0 4px rgba(64, 158, 255, 0.5);
  }

  .panel-content {
    padding: 1px;
    height: 100%; /* 修改为固定高度 */
    display: flex;
    flex-direction: column;
    /* 添加顶部过渡 */
    border-top: 2px solid transparent;
    border-image: linear-gradient(to right, #f0f0f0, transparent) 1;
  }

  .default-content {
    padding: 2px;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin: 10px;
  }

  // Tab相关样式
  .tab-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  // 左侧竖向按钮样式
  .vertical-tab-buttons {
    display: flex;
    flex-direction: column;
    width: 24px; /* 一个文字的宽度 */
    background-color: #f5f7fa;
    border-right: 1px solid #e4e7ed;
    z-index: 10;
    transition: all 0.3s ease;
    padding: 4px 0;
  }

  // 独立的折叠图标按钮样式
  .collapse-toggle-button {
    width: 24px; /* 与下方按钮相同宽度 */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #606266;
    margin: 4px 0;
    border-radius: 4px;
    transition: all 0.3s ease;
    background-color: transparent;
    border: none;

    &:hover {
      background-color: #f0f2f5;
      color: #303133;
    }
  }

  .vertical-tab-button {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 12px 4px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #606266;
    border-right: 3px solid transparent;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;

    &:hover {
      color: #303133;
      background-color: #f0f2f5;
    }

    &.active {
      color: #67c23a;
      border-right-color: #67c23a;
      background-color: #f0f9eb;
      font-weight: 500;
    }
  }

  .tab-content-wrapper {
    flex: 1;
    min-width: 200px;
    position: relative;
    padding: 5px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateX(0);
  }

  .tab-content {
    display: block;
    min-width: 200px;
    padding: 1px 0;
    // 确保内容可见
    opacity: 1;
    visibility: visible;
  }
}


.tab2-default {
  padding: 10px 0;
  width: 200px;
  background-color: transparent;
}

// 连接信息工具栏样式
.connection-toolbar {
  display: flex;
  gap: 6px;
  padding: 5px 0 10px 8px;
  margin-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
}

.toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #606266;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;

  &:hover {
    background-color: #ecf5ff;
    color: #409eff;
  }

  &.add-connection:hover {
    background-color: #e3f2fd;
    color: #1976d2;
  }

  &.new-group:hover {
    background-color: #e8f5e9;
    color: #388e3c;
  }

  &.refresh:hover {
    background-color: #fff3e0;
    color: #f57c00;
  }

  .toolbar-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
}

// 固定布局列表项样式
.fixed-layout-item {
  padding: 8px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;

  &:hover {
    background-color: #ecf5ff;
    color: #409eff;
  }

  &.selected {
    background-color: #ecf5ff;
    color: #409eff;
    font-weight: 500;
  }
}

// 右键菜单样式
.context-menu {
  position: fixed;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 100px;
  padding: 4px 0;
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #606266;

  &:hover {
    background-color: #ecf5ff;
    color: #409eff;
  }

  &.connect:hover {
    background-color: #e3f2fd;
    color: #1976d2;
  }

  &.rename:hover {
    background-color: #fff3e0;
    color: #ff9800;
  }

  &.edit:hover {
    background-color: #e8f5e9;
    color: #388e3c;
  }

  &.delete:hover {
    background-color: #ffebee;
    color: #f44336;
  }
}

// 右侧内容区域样式
.right-content {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.full-height-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-tabs__header) {
    margin: 0;
    border-bottom: 1px solid #e4e7ed;
  }

  :deep(.el-tabs__content) {
    flex: 1;
    overflow: hidden;
  }
}

// 无历史记录状态样式
.no-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
  padding: 40px 20px;
  text-align: center;
}

.no-history-icon {
  margin-bottom: 16px;
  opacity: 0.6;
}

.no-history-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #606266;
}

.no-history-description {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 300px;
}

.no-history-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  &:active {
    transform: translateY(0);
  }

  .toolbar-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }
}
</style>